<!--
<template>
	<view>
		<button open-type="getUserInfo" @click="getUser">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			getUser(){
				// 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						//console.log(res)
						
						//存储用户信息
						wx.setStorage({
							key:"userinfo",
							data:JSON.stringify(res.userInfo)
						})
						
						//页面跳转——回到个人中心
						wx.reLaunch({
							url:'/pages/personal/personal'
						})
					}
				})
			}
		}
	}
</script>

<style lang="stylus">

</style>
-->
<template>
	<div class="login-container">
	    <form>
			<div class="form-group">
				<label>用户名:</label>
				<input type="text" id="username" v-model="username" required placeholder=" 请输入用户名......">
			</div>
			<div class="form-group">
				<label for="password">密码:</label>
				<input type="password" id="password" v-model="password" required placeholder=" 请输入密码......">
			</div>
			<button @click="toRegister()">注册</button>
			<button type="submit" @click="handleLogin()">登录</button>
	    </form>
	</div>
	
</template>

<script>
	import request from '../../utils/request.js';
	import Vue from 'vue'
	
	//import{mapActions,mapState,mapMutations} from 'vuex';
	
	export default {
		data() {
			return {
				userInfo:[],
				username:'',
				password:''
			};
		},
		computed: {
			/*...mapState({
				userInfo:state=>state.login.userInfo
			})*/
		},
		mounted() {
			/*获取仓库里的数据
			console.log(this.$store.state.login.test);
			this.getUserInfoActions(); */
			this.getUserInfo();
		},
		methods: {
			//...mapActions('login',['getUserInfoActions'])
			async getUserInfo(){
				const res=await request('/getUserInfo');
				console.log(res);
				this.userInfo=res.userInfo;
			},
			handleLogin(){
				console.log('尝试登录:',this.username,this.password);
				//console.log(this.userInfo[0].nickName);
				var i,index;
				var flag=false;
				for(i=0;i<this.userInfo.length;i++){
					if(this.username===this.userInfo[i].nickName&&this.password===this.userInfo[i].pwd){
						flag=true;
						index=i;
						break;
					}
				}
				if(flag){
					//console.log('登录成功');
					var that=this;
					wx.showLoading({
					  title: '加载中',
					})
					setTimeout(function () {
					  wx.hideLoading()
					  wx.showModal({
						title:'登录成功',
						content:'点击确定进入个人中心',
						success(res) {
							if (res.confirm) {
								wx.setStorage({
									key:"userInfo",
									data:JSON.stringify(that.userInfo[index])
									/*data:{
										nickName:that.userInfo[index].nickName,
										userName:that.userInfo[index].userName
									}*/
								})
								wx.reLaunch({
									url:'/pages/personal/personal'
								})
						  	}
						  }
					  })
					}, 500)
				}else{
					//console.log('登录失败');
					wx.showLoading({
					  title: '加载中',
					})
					setTimeout(function () {
					  wx.hideLoading()
					  wx.showModal({
						title:'登录失败',
						content:'用户名或密码不正确，请重新输入!'
					  })
					}, 500)
				}
			},
			toRegister(){
				wx.reLaunch({
					url:'/pages/register/register'
				})
			}
		}
	}
</script>

<style scoped>
	.login-container {
		margin: 150rpx auto;
		padding: 20px;
	}
	.form-group {
		margin-bottom: 15px;
		display: flex;
		align-items: center;
	}	
	label {
		width: 120rpx;
		text-align: center;
		font-size: 35rpx;
		margin-right: 5px;
	}
	input {
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		border: 1px solid #000;
		border-radius: 5px;
	}
	button {
		margin-top: 80rpx;
		width: 80%;
		height: 100rpx;
		background-color: #bb2c08;
		color: white;
		border: none;
		border-radius: 5px;
	}
</style>